<template>
  <div class='container'>
    <div class="app-container">
     <el-card>
          <!-- 头部工具栏 -->
        <navbarTools>
          <template #before>
              <div>
                <span style="margin: 0 10px 0 20px">关键字</span>
                <el-input style="width:40%" placeholder="根据编号搜索" v-model="input" @keydown.native.enter="search"></el-input>
              </div>
          </template>
          <template #after>
              <div>
                <el-button @click="delData">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </div>
          </template>
        </navbarTools>
        <!-- 提示信息 -->
        <el-alert
          type="info"
          show-icon>
          <template #title>
              <span>数据一共有{{val}}条</span>
          </template>
        </el-alert>
        <!-- 表格 -->
        <titleTable ref="searchData" @checkVal='val = $event'/>

     </el-card>
    </div>
  </div>
</template>

<script>
import titleTable from '../components/wyl/title-table.vue'
import navbarTools from '../components/wyl/navbar-tools.vue'

export default {
  components: {
    titleTable,
    navbarTools
  },
  data () {
    return {
      val: '', // 提示信息
      input: '' // 搜索关键字
    }
  },
  methods: {
    // 清除
    delData () {
      this.input = ''
    },
    // 搜索
    search () {
      // 调用子组件接口，将关键字传过去
      this.$refs.searchData.search(this.input)
    }
  }

}
</script>

<style scoped>
.el-alert {
  margin: 20px 0 20px;
}
</style>
